<template>
    <div class="sku-box">
        <div :class="{'sku-mask':show}" @click.stop="close"></div>
        <transition name="slide-fade">
            <div v-show="show" class="sku-popup">
                <div class="sku-mask-header sku-plr15">
                    <div class="sku-img-box">
                        <img :src="choseDesc.img"/>
                    </div>
                    <div class="sku-sale sku-ptb10">
                        <h4>{{choseDesc.title}}</h4>
                        <p>￥<span>{{choseDesc.desc?computePrice(spec.price):computePrice(choseDesc.price)}}</span>
                            &nbsp;<s
                                class="sku-marker-price">¥{{choseDesc.desc?computePrice(spec.mark_price):computePrice(choseDesc.mark_price)}}</s>
                        </p>
                        <span class="text">库存:{{choseDesc.desc?spec.store:choseDesc.store}}件</span>
                        <span class="text" v-if="choseDesc.desc">已选：{{spec.name}}</span>
                        <span class="close"></span>
                    </div>
                    <i class="close-sku" @click.stop="close"></i>
                </div>
                <div class="sku-mask-body">
                    <div class="specifications plr15" style="border-bottom: 1px solid #f4f4f4;">
                        <h3 class="title" style="border-bottom: none" v-if="choseDesc.desc">选择规格</h3>
                        <ul class="sku-goods-box ptb10">
                            <li v-for="item in choseDesc.desc" class="sku-item"
                                :class="{'desc-active':spec.id==item.id}"
                                @click="choseGoodsDesc(item)">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>

                    <div class="num-good-box plr15">
                        <span class="title">购买数量</span>
                        <div class="num_box">
                            <i class="sku-reduce" @click="goodsNumber > 1 ?goodsNumber-- : goodsNumber"></i>
                            <i class="sku-num">{{goodsNumber}}</i>
                            <i class="sku-add"
                               @click="((choseDesc.desc?spec.store:choseDesc.store)>goodsNumber)? goodsNumber++ :goodsNumber"></i>
                        </div>
                    </div>
                </div>
                <div class="mask-footer">
                    <div class="v-bottom-btn">
                        <span class="sku-btn-box sku-add-cart" @click="addShopcart(1)">加入购物车</span>
                        <span class="sku-btn-box sku-buy" @click="addShopcart()">立即购买</span>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<!--<SkuSelector-->
<!--v-model="popupSku"-->
<!--:choseDesc=goodsDetail-->
<!--@on-confirm="onChoseSku"-->
<!--:detailPage="true">-->
<!--</SkuSelector>-->
<script>
    export default {
        name: "SkuSelector",
        model: {
            prop: "show",
            event: "change"
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            choseDesc: {
                type: Object,
                default: {}
            },
            onConfirm: {
                type: Function,
                default: function () {
                }
            },
            buyNow: {
                type: Boolean,
                default: false
            },
            detailPage: {
                type: Boolean,
                default: false
            },
            //已选中
            choseSpec: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                spec: {}, //选中的规格
                goodsNumber: 1, //默认数量
                goodsImgs: [],
                choseGoodsDescInfo: {}
            };
        },
        watch: {
            show: function (t) {
                if (t) this.init();
                console.log(this.choseDesc)
            },
        },
        methods: {
            //设置默认的规格
            init() {
                this.spec = this.choseSpec
            },

            //关闭
            close() {
                this.$emit("update:show", false);
                this.$emit("change", false);
            },

            //添加购物车/立即购买
            addShopcart(id = 0) {
                // if (!this.spec.store) return this.fail('库存不足')
                let params = {
                    prdID: this.choseDesc.goods_id,
                    num: this.goodsNumber,
                    skuID: this.spec.id ? this.spec.id : null
                }
                this.$emit("on-confirm", params);
                if (id == 0) this.$router.push({name: 'shopping'})
                this.close();
            },

            //选择商品规格
            choseGoodsDesc(item) {
                console.log(item)
                this.goodsNumber = 1
                this.spec = item;
                this.$emit("changeDescId", item);
            }
        }
    };
</script>

<style scoped>
    .sku-box {
        font-size: 12px;
    }

    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translateY(100px);
        opacity: 0;
    }

    .sku-popup {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #fff;
        position: fixed;
        top: 30%;
        bottom: 0;
        z-index: 999;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .sku-mask {
        opacity: 0.5;
        background: #000;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .sku-mask-header {
        display: flex;
        height: 8.33em;
    }

    .sku-img-box {
        position: relative;
        height: 8.33em;
        width: 8.33em;

    }

    .sku-img-box img {
        position: absolute;
        top: -1em;
        width: 100%;
        height: 100%;
    }

    .sku-sale {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: .42em;
    }

    .sku-sale h4 {
        font-size: 1.17em;
    }

    .sku-sale p {
        font-size: 1.33em;
        color: #F03726;
    }

    .sku-marker-price {
        font-size: .75em;
        color: #666;
    }

    .sku-mask-body {
        flex: 1;
        overflow: scroll;
        padding-bottom: 4.17em;
    }

    .sku-goods-box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .sku-item {
        padding: .42em .83em;
        border: 1px solid red;
        border-radius: 3px;
        margin-right: 1em;
    }

    .desc-active {
        background-color: #F03726 !important;
        color: #fff !important;
        border: 0;
    }

    .num-good-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .num-good-box .title {
        font-size: 1.17em;
    }

    .num_box {
        display: flex;
        align-items: center;
        height: 3em;
        color: #666;
    }

    .sku-reduce {
        position: relative;
        display: inline-flex;
        width: 2em;
        height: 2em;
        border-radius: 100%;
        background: #c1c1c1;
    }

    .sku-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: 1.33em;
        width: 2.25em;
        height: 1.5em;
    }

    .sku-reduce:after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        width: 10px;
        border-bottom: 2px solid #fff;
    }

    .sku-add {
        position: relative;
        display: inline-flex;
        width: 2em;
        height: 2em;
        border-radius: 100%;
        background: #F03726;
    }

    .sku-add:after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        width: 10px;
        border-bottom: 2px solid #fff;
    }

    .sku-add:before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        height: 10px;
        border-right: 2px solid #fff;
    }

    .mask-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .v-bottom-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.17em;
        height: 3.57em;

    }

    .sku-btn-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
    }

    .sku-add-cart {
        background: #ff9090;
    }

    .sku-buy {
        background: #F03726;
    }

    .sku-ptb10 {
        padding-top: .83em;
        padding-bottom: .83em;
    }

    .sku-plr15 {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
</style>
